<script setup lang="ts">
import { ref } from 'vue';
import lightOn from './assets/light_on.svg'
import lightOff from './assets/light_off.svg'

const isOn = ref(false)
const changeLight = () => {
  isOn.value = !isOn.value
}
</script>
<template>
  <button @click="changeLight()">{{ isOn ? '关灯' : '开灯' }}</button>
  <!-- 三元表达式方式绑定类名 -->
  <p v-bind:class="isOn ? 'isActive' : ''">{{ isOn }}</p>
  <!-- 对象写法绑定类名：{ 类名：条件 } -->
  <!-- v-bind 可省略 -->
  <p :class="{ isActive: isOn }">{{ isOn }}</p>
  <img :src="isOn ? lightOff : lightOn" alt="">
</template>
<style scoped>
.isActive {
  background-color: gold;
}
</style>